<template>
    <div class="app-container">
        <el-form ref="form" :model="form" label-width="120px" style='margin-top: 20px;'>
            <el-row :gutter="24" class="mb8">
                <el-col :span="12">
                    <div class="title">
                        <span class="border"></span>
                        <span>模板基本信息</span>
                    </div>
                    <el-form-item label="模板名称：" prop="templateName" verify>
                        <el-input v-model="form.templateName" placeholder="请输入" style="width: 200px;" show-word-limit
                            maxlength="10" />
                    </el-form-item>
                    <div class="title">
                        <span class="border"></span>
                        <span>模板配置</span>
                    </div>
                    <el-form-item label="模板状态：" prop="enable" verify>
                        <el-switch v-model="form.enable">
                        </el-switch>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="24" class="mb8">
                <el-col :span="6">
                    <div class="left-aside">
                        <div class="title">加“<span>*</span>”号的节点默认为必选项</div>
                        <el-checkbox-group v-model="form.tcheckboxList">
                            <el-checkbox v-for="item in templateList" :disabled="item.id < 4" :label="item.moduleName"
                                :key="item.id">
                                <span v-if="item.id < 4" class="star">{{ item.moduleName }} <span>*</span></span>
                                <span v-else>{{ item.moduleName }}</span>
                            </el-checkbox>
                        </el-checkbox-group>
                    </div>
                </el-col>
                <el-col :span="17">
                    <div class="content">
                        <template v-for="item in templateList">
                            <div class="templateItem" v-if="form.tcheckboxList.includes(item.moduleName)">
                                <div class="title">{{ item.moduleName }}</div>
                                <div class="fontWrap">
                                    <div class="fonts" v-for="(items, index) in item.childrenList" :key="index">
                                        {{ items }}</div>
                                </div>
                            </div>
                        </template>
                    </div>
                    <div class="btnWarp">
                        <el-button v-preventReClick size="mini" @click="cancel">取消</el-button>
                        <el-button v-preventReClick type="primary" size="mini" @click="submitForm">保存</el-button>

                    </div>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>
<script>
import {
    listEvidence, addEvidence, updateEvidence,
} from "@/api/testify/template";
import { templateList } from "../template_obj"


export default {
    components: {
    },
    name: "UserGroupRole",
    data() {
        return {
            form: {
                templateName: '',
                enable: false,
                tcheckboxList: ["开启签署流程", "签署执行", "结束签署流程"]
            },
            templateList: templateList
        };
    },
    created() {
        // this.getDetail();
    },
    methods: {
        getDetail() {
            this.loading = true;
            listEvidence(this.queryParams).then(
                response => {
                    // this.tempList = response.data.list;
                    // this.total = response.data.total;
                    this.total = 2;
                    this.loading = false;
                }
            ).catch(err => this.loading = false)
        },
        async submitForm() {
            let arr = []
            this.templateList.map(match => {
                arr.push(
                    {
                        moduleName: match.moduleName,
                        moduleCode: match.moduleCode,
                        enable: this.form.tcheckboxList.includes(match.moduleName) ? "1" : "0"
                    }
                )
            })
            let params = {
                templateName: this.form.templateName,
                enable: this.form.enable ? 1 : 0,
                templateContent: JSON.stringify(arr)
            }


            let res = await addEvidence(params)
            if (res.code == 0) {
                this.$router.go(-1)
                this.$modal.msgSuccess("新增成功");
            }
        },
        cancel() {
            this.$router.go(-1)
        }
    }
};
</script>
<style lang="scss">
.app-container {
    .left-aside {
        border: 1px solid #ddd;
        padding: 10px;

        .title {
            font-size: 12px;

            span {
                color: #e04765;
                font-size: 14px;
            }
        }
    }

    .content {
        .templateItem {
            margin-top: 50px;

            .title {
                background: #ddd;
                text-align: center;
                border-radius: 0 15px 0 0;
                width: 100px;
                height: 30px;
                line-height: 30px;

            }

            .fontWrap {
                background: #eee;
                display: flex;
                flex-wrap: wrap;
                padding: 20px;

                .fonts {
                    width: 100px;
                    margin: 0 80px 30px 0;
                }
            }
        }
    }

    .btnWarp {
        display: flex;
        justify-content: space-between;
        width: 200px;
        margin: 20px auto;
    }

    .el-checkbox {
        display: block;
        margin-top: 10px;
        font-weight: 400;
        color: #000 !important;

        .star {
            font-weight: 900;

            span {
                color: #e04765;
                font-weight: 400;
            }
        }
    }

    :deep(.is-checked) {
        .el-checkbox__label {
            color: #000 !important;
        }
    }

    .el-checkbox__input.is-disabled.is-checked+.el-checkbox__label {
        color: #000 !important;
    }

    .el-checkbox__input.is-checked+.el-checkbox__label {
        color: #000 !important;
    }
}
</style>